var stats;

//初始化
function init() {
    //构建页面fps监听对象
    stats = new Stats();
    var sds = stats.domElement.style;
    sds.position = 'absolute';
    sds.right = '0px';
    sds.top = '0px';
    document.body.appendChild(stats.domElement);

    //构建dom
    for(var i = 0; i < 100; i += 1) {
        var startValue =  100 + (Math.random() - Math.random()) * 50;
        var endValue = 100 + (Math.random() - Math.random()) * 50;

        var oDiv = document.createElement('div');
        var bg = (Math.random() * 0xffffff) >> 0; //转成了10进制
        oDiv.style.position = 'absolute';
        oDiv.style.top = (Math.random() * window.innerHeight) + 'px';
        oDiv.style.left = startValue + 'px';
        oDiv.style.background = "#" + bg.toString(16); //转为16进制
        oDiv.style.width = '100px';
        oDiv.style.height = '2px';

        var elem = {
            x: startValue,
            div: oDiv
        };

        var tween = new TWEEN.Tween(elem)
                    .to({
                        x: endValue
                    }, 4000)
                    .delay(Math.random() * 1000)
                    .easing(TWEEN.Easing.Back.Out)
                    .onUpdate(updateCB);

        var tweenBack = new TWEEN.Tween(elem)
                        .to({
                            x: startValue
                        })
                        .delay(Math.random() * 1000)
                        .easing(TWEEN.Easing.Back.InOut)
                        .onUpdate(updateCB);
            
        tween.chain(tweenBack);
        tweenBack.chain(tween);

        tween.start();

        document.getElementById('div1').appendChild(oDiv);

    }
}

//stats对象也是基于tween构建的，所以也可以使用帧动画处理
function animate(time) {
    requestAnimationFrame(animate);

    TWEEN.update(time);
    stats.update();
}

//更新函数
var updateCB = function(obj) {
    obj.div.style.transform = `translateX(${obj.x}px)`;
}

init();
animate();